<template>
    <div class="person">
       <h2>一辆{{car.brand}}车，价值{{car.price}}万</h2>
       <button @click="changePrice">点击修改汽车的价格</button>
       <br>
       <h2>游戏列表:</h2>
        <ul>
            <li v-for="item in games" :key="item.id">{{item.name}}</li>
        </ul>
        <button @click="changeGames">点击修改游戏名字</button>
    </div>

</template>

<script setup name="Person">
import { reactive } from 'vue';
let car=reactive({brand:'奔驰',price:100})
let games=reactive([
    {id:'01',name:'GTA'},
    {id:'02',name:"CS2"},
    {id:'03',name:"生化危机4"}
])

function changePrice(){
   car.price+=10
}
function changeGames(){
    games[0].name="地平线5"
}
</script>


<!-- 
    糖写法响应式数据
<script setup name="Preson">
import { ref } from 'vue';

const name=ref("嘻嘻")
const age=ref(18)
const tel=ref("13338410699")

function changeName(){
    name.value="哈哈"
}
function changeAge(){
    age.value++
}
function showTel(){
    alert(tel.value)
}


</script> -->



<style>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 5px;
    padding: 5px;
}
button{
    margin: 0 5px;
}
</style>